<template>
  <div class="shared">
    <div class="main">
      <div class="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">一级菜单</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">二级菜单</a></el-breadcrumb-item>
          <el-breadcrumb-item>三级菜单</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="sub">
        <div class="tabs">
          <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="共享商圈" name="first">
                <div class="search">
                  <el-row type="flex" class="row-bg" justify="space-around">
                    <el-col
                      :span="8"
                    ><el-form ref="form" :model="form" label-width="80px">
                      <el-form-item label="店铺名称:">
                        <el-input
                          v-model="form.name"
                          size="small"
                          placeholder="请输入"
                        /> </el-form-item></el-form></el-col>
                    <el-col :span="8">
                      <el-form>
                        <el-form-item label="行业:">
                          <el-select v-model="value" placeholder="请选择" size="small">
                            <el-option
                              v-for="item in tableData"
                              :key="item.storeindustry"
                              :label="item.storeindustry"
                              :value="item.storeindustry"
                            />
                          </el-select>
                        </el-form-item>
                      </el-form>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="primary" size="small">查询</el-button>
                      <el-button size="small">重置</el-button>
                    </el-col>
                  </el-row>
                </div>
                <div class="shList">
                  <div class="Tips">
                    <i
                      class="el-icon-info"
                    >审核店铺，店铺审核通过之后，店铺既可在线上上线运营，品台将正式开始对店铺进行管理</i>
                  </div>
                  <div class="list">
                    <el-table :data="tableData" border style="width: 100%;">
                      <el-table-column prop="storenumber" label="店铺摆好" width="130px" />
                      <el-table-column prop="storename" label="店铺名称" width="130px" />
                      <el-table-column prop="storeindustry" label="店铺行业" width="130px" />
                      <el-table-column prop="storeaddress" label="店铺地址" width="130px" />
                      <el-table-column prop="phone" label="联系电话" width="130px" />
                      <el-table-column prop="mobilId" label="推广人ID" width="130px" />
                      <el-table-column prop="rightsclass" label="权益级别" width="130px" />
                      <el-table-column prop="sela" label="销售额" width="130px" />

                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button
                            type="text"
                            size="small"
                            @click="datelisBtn(scope.row)"
                          >详情
                          </el-button>

                          <el-button
                            type="text"
                            size="small"
                            @click="handleClick(scope.row)"
                          >查看商品</el-button>
                          <el-button
                            type="text"
                            style="margin-left: 16px;"
                            size="small"
                            @click="handleJY(scope.row)"
                          >
                            经营
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="block">
                    <el-pagination
                      background
                      :current-page="pageData.pagenum"
                      :page-sizes="[1, 5, 10, 20]"
                      :page-size="pageData.pagesizes"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="10"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                    />
                  </div>
                </div>
              </el-tab-pane>

              <el-tab-pane label="个人商圈" name="second">
                <div class="search">
                  <el-row type="flex" class="row-bg" justify="space-around">
                    <el-col
                      :span="8"
                    ><el-form ref="form" :model="form" label-width="80px">
                      <el-form-item label="店铺名称:">
                        <el-input
                          v-model="form.name"
                          size="small"
                          placeholder="请输入"
                        /> </el-form-item></el-form></el-col>
                    <el-col :span="8">
                      <el-form>
                        <el-form-item label="日期:">
                          <el-date-picker
                            v-model="value"
                            size="small"
                            type="date"
                            placeholder="选择日期"
                          />
                        </el-form-item>
                      </el-form>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="primary" size="small">查询</el-button>
                      <el-button size="small">重置</el-button>
                    </el-col>
                  </el-row>
                </div>
                <div class="shList">
                  <div class="newBld">
                    <el-button type="primary" size="small" @click="Adsearch = true">+新建</el-button>
                    <el-button type="primary" size="small" @click="Adsearch = true">商铺统计</el-button>

                  </div>
                  <div class="Tips">
                    <i
                      class="el-icon-info"
                    />已选择4项 消费共计：36.4万
                  </div>
                  <div class="list">
                    <el-table
                      ref="multipleTable"
                      :data="ConPerData"
                      tooltip-effect="dark"
                      style="width: 100%"
                      @selection-change="handleSelectionChange"
                    >
                      <el-table-column
                        type="selection"
                        width="55"
                      />
                      <el-table-column
                        prop="username"
                        label="用户名称"
                        width="150"
                      />
                      <el-table-column
                        prop="phone"
                        label="联系电话"
                        width="150"
                      />
                      <el-table-column
                        prop="storecount"
                        label="商圈店铺数量"
                        width="150"
                      />
                      <el-table-column
                        prop="ordercount"
                        label="订单数量"
                        width="150"
                      />
                      <el-table-column
                        prop="expenditure"
                        label="消费额"
                        width="150"
                      />
                      <el-table-column
                        prop="frequency"
                        label="消费频次"
                        width="120"
                      />
                      <el-table-column
                        fixed="right"
                        label="操作"
                      >

                        <template slot-scope="scope">
                          <el-button type="text" size="small" @click="delBtn(scope.row.id)">删除</el-button>
                          <el-button type="text" size="small" @click="ConannBtn(scope.row)">消费分析</el-button>
                        </template>
                      </el-table-column>

                    </el-table>

                  </div>
                  <div class="block">
                    <el-pagination
                      background
                      :current-page="conPageData.pagenum"
                      :page-sizes="[1, 5, 10, 20]"
                      :page-size="conPageData.pagesizes"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="20 "
                      @size-change="SizeChange"
                      @current-change="CurrentChange"
                    />
                  </div>
                </div></el-tab-pane>
            </el-tabs>
          </template>
        </div>
        <el-dialog title="高级搜索" :visible.sync="Adsearch">
          <div>
            <el-form ref="form" :model="AdsearchInput" label-width="80px">
              <el-form-item label="用户名">
                <el-input v-model="AdsearchInput.username" />
              </el-form-item>
              <el-form-item label="电话:">
                <el-input v-model="AdsearchInput.usernum" />
              </el-form-item>
              <el-form-item label="消费店铺">
                <el-input v-model="AdsearchInput.conshop" />
              </el-form-item>
              <el-form-item label="消费数量">
                <el-input v-model="AdsearchInput.conquantity" />
              </el-form-item>
              <el-form-item label="消费金额">
                <el-input v-model="AdsearchInput.conamount" />
              </el-form-item>
              <el-form-item label="消费频次">
                <el-input v-model="AdsearchInput.contimes" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button @click="cleanAdinput">重置</el-button>
              </el-form-item>

            </el-form>
          </div>
        </el-dialog>

        <el-dialog title="店铺详情" :visible.sync="dialogTableVisible">
          <el-table :data="datalisData">
            <el-table-column prop="storename" label="店铺名称" width="150" />
            <el-table-column
              prop="storenumber"
              label="店铺电话"
              width="200"
            />
            <el-table-column prop="storeaddress" label="店铺地址" />
          </el-table>
        </el-dialog>
        <el-drawer

          :visible.sync="drawer2"
          :with-header="false"
          direction="ttb"
          size="70%"
        >
          <div class="draTabs">
            <el-row :gutter="20">
              <el-col :span="8"><h3>用户ID:{{ ConAnarow.id }}</h3></el-col>

              <el-col :span="8"><h3>用户名称:{{ ConAnarow.username }}</h3></el-col>
              <el-col :span="8"><h3>联系方式:{{ ConAnarow.phone }}</h3></el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <div class="leftcard">
                  <h4>销售额类别占比</h4>
                  <div>本周 本月 本年    <el-date-picker
                    v-model="value2"
                    type="monthrange"
                    range-separator="~"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                  /></div>
                  <echars /></div>
              </el-col>
              <el-col :span="16">
                <div class="rightcard">
                  <el-table
                    ref="multipleTable"
                    :data="ConPerData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                  >

                    <el-table-column
                      prop="username"
                      label="用户名称"
                      width="150"
                    />
                    <el-table-column
                      prop="phone"
                      label="联系电话"
                      width="150"
                    />
                    <el-table-column
                      prop="storecount"
                      label="商圈店铺数量"
                      width="150"
                    />
                    <el-table-column
                      prop="ordercount"
                      label="订单数量"
                      width="150"
                    />
                    <el-table-column
                      prop="expenditure"
                      label="消费额"
                      width="150"
                    />
                    <el-table-column
                      prop="frequency"
                      label="消费频次"
                      width="120"
                    /></el-table>
                  <div class="block">
                    <el-pagination
                      background
                      :current-page="conPageData.pagenum"
                      :page-sizes="[1, 5, 10, 20]"
                      :page-size="conPageData.pagesizes"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="20 "
                      @size-change="SizeChange"
                      @current-change="CurrentChange"
                    />
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-drawer>
        <el-drawer

          :visible.sync="drawer"
          :with-header="false"
          direction="ttb"
          size="70%"
        >
          <div class="conTabs">
            <el-row :gutter="20">
              <el-col
                :span="6"
              ><h3>店铺ID：{{ curShared.storenumber }}</h3></el-col>
              <el-col :span="6"><h3>商铺名称:{{ curShared.storename }}</h3></el-col>
              <el-col :span="6"><h3>所属行业:{{ curShared.storeindustry }}</h3></el-col>
              <el-col :span="6"><h3>联系电话:{{ curShared.phone }}</h3></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="leftcard">
                  <h4>店铺销售情况</h4>
                  <div>本周 本月 本年    <el-date-picker
                    v-model="value2"
                    type="monthrange"
                    range-separator="~"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                  /></div>
                  <echars /></div>
              </el-col>
              <el-col :span="12">
                <div class="rightcard"> <h4>店铺消费情况</h4>
                  <div>本周 本月 本年    <el-date-picker
                    v-model="value2"
                    type="monthrange"
                    range-separator="~"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                  /></div>
                  <echars /></div>
              </el-col>
            </el-row>
          </div>
        </el-drawer>

      </div>
    </div>
  </div>
</template>

<script>
import { getShared, delCondata, getCondata } from '@/api/getShared';

import Echars from './component/echars';

export default {
  components: {
    Echars,

  },

  data() {
    return {
      AdsearchInput: {
        username: '',
        usernum: '',
        conshop: '',
        conquantity: '',
        conamount: '',
        contimes: '',

      },

      Adsearch: false,
      value2: '',
      activeName: 'first',
      form: { name: '', region: '' },
      dialogTableVisible: false,
      dialogFormVisible: false,
      drawer: false,
      drawer2: false,
      value: '',
      curShared: '',
      ConAnarow: '',
      datalisData: '',
      tableData: [
        {
          storenumber: '',
          storename: '',
          storeindustry: '',
          storeaddress: '',
          phone: '',
          mobilId: '',
          rightsclass: '',
          sela: '',
        },
      ],
      ConPerData: [{
        username: '',
        phone: '',
        storecount: '',
        ordercount: '',
        expenditure: '',
        frequency: '',
        consumptionnumber: '',
        Consumershops: '',
        consumptioncount: '',
        id: '',

      }],
      pageData: {
        pagenum: 1,
        pagesizes: 1,
      },
      conPageData: {
        pagenum: 1,
        pagesizes: 1,
      },

      currentPage4: 4,
    };
  },
  created() {
    this.getShared();
    this.getCondata();
  },

  methods: {
    async getShared() {
      const { data } = await getShared(this.pageData);

      this.tableData = data;
    },
    async getCondata() {
      const { data } = await getCondata(this.conPageData);
      this.ConPerData = data;
      console.log(123);
      console.log(this.ConPerData);
    },

    async delBtn(id) {
      console.log('111');
      try {
        await this.$confirm('确定要删除此行吗？');
        await delCondata(id);
        await this.getCondata();
        this.$message.success('删除此行git 成功');
      } catch (error) {
        console.log(error);
      }
    },

    handleJY(row) {
      this.drawer = true;
      this.curShared = row;
      console.log(this.curShared);
    },
    datelisBtn(row) {
      this.dialogTableVisible = true;
      this.datalisData = [row];
      console.log(this.datalisData);
    },

    ConannBtn(row) {
      this.drawer2 = true;
      this.ConAnarow = row;
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    SizeChange(val) {
      this.conPageData.pagesizes = val;
      this.getCondata();
    },
    CurrentChange(val) {
      this.conPageData.pagenum = val;
      this.getCondata();
    },
    handleSizeChange(val) {
      this.pageData.pagesizes = val;
      this.getShared();
    },
    handleCurrentChange(val) {
      this.pageData.pagenum = val;
      this.getShared();
    },
    onSubmit() {
      console.log(this.AdsearchInput);
    },
    cleanAdinput() {
      this.AdsearchInput = {
        username: '',
        usernum: '',
        conshop: '',
        conquantity: '',
        conamount: '',
        contimes: '',

      };
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss">
.shared {
  margin: 30px 30px;
  .header {
    .el-breadcrumb {
      margin-left: 20px;
    }
  }
  .sub {
    margin-top: 20px;
    .search {
      margin-top: 20px;
    }
    .shList {
      margin-top: 30px;
      .Tips {
        height: 38px;
        width: 100%;
        background-color: #e6f7ff;
        border-radius: 2px;
        border: 1px solid #bae7ff;
        line-height: 38px;
        padding-left: 50px;
        font-size: 14px;
        margin-bottom: 15px;
        color: #9DA9AE;

      }
      .newBld{
        margin-bottom: 20px;
      }

    }
    .block{
      margin: 0 20%;
    }
  }
  .el-form-item__label {
    padding: 0 0 0 0;
  }
}
</style>
